<script>
import {ref} from 'vue'
// 导入用户信息 使用 pinia 保证线程安全
import {userStatus} from "@/pinia/userStatus"

export default {
  props: [
    'changRouter'
  ],
  setup(props) {
    const user = userStatus()
    let use_form = ref({})
    return {
      use_form,
      user,
      changeView(view) {
        props.changRouter(view)
      },
      handleUpdateShow(i) {
        this.use_form[i] = 1
      },
    }
  }
}
</script>

<template>
  <div class="body">
    <n-divider>背包</n-divider>
    <div class="shu_xing">
      <n-list clickable :show-divider="false">
        <n-list-item @click="changeView('ren_wu_shu_xing')">
          <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 属性</n-gradient-text>
        </n-list-item>
      </n-list>
    </div>
    <div class="xiu_xing">
      <n-list clickable :show-divider="false">
        <n-list-item @click="changeView('xian')">
          <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 修行</n-gradient-text>
        </n-list-item>
      </n-list>
    </div>
    <div class="beo_bao_main">
      <div class="header">
        <div class="item">
          <n-popover trigger="hover" v-if="1 in user.equipment">
            <template #trigger>
              <img class="item_son" :src="user.equipment['1'].image" :alt="user.equipment['1'].image"/>
            </template>
            <div class="equipment_detail">
              <p> {{ user.equipment["1"].name }} </p>
              <p> {{ user.equipment["1"].describe }} </p>
              <div class="equipment_detail_button">
                <n-button type="tertiary" @click="user.clear_equipment(user.equipment['1'])"> 卸下</n-button>
              </div>
            </div>
          </n-popover>
          <label>装备</label>
        </div>
        <div class="item">
          <n-popover trigger="hover" v-if="2 in user.equipment">
            <template #trigger>
              <!--            <div class="item_son"> {{ user.equipment["2"].name.slice(0, 1) }}</div>-->
              <img class="item_son" :src="user.equipment['2'].image" :alt="user.equipment['2'].image"/>
            </template>
            <div class="equipment_detail">
              <p> {{ user.equipment["2"].name }} </p>
              <p> {{ user.equipment["2"].describe }} </p>
              <div class="equipment_detail_button">
                <n-button type="tertiary" @click="user.clear_equipment(user.equipment['2'])"> 卸下</n-button>
              </div>
            </div>
          </n-popover>
          <label v-else>装备</label>
        </div>
      </div>
      <div class="left">
        <div class="item">装备</div>
        <div class="item">装备</div>
        <div class="item">装备</div>
        <div class="item">装备</div>
      </div>
      <div class="right">
        <div class="item">装备</div>
        <div class="item">装备</div>
        <div class="item">装备</div>
        <div class="item">装备</div>
      </div>
      <div class="down">
        <div class="item">装备</div>
        <div class="item">装备</div>
      </div>
    </div>
    <div class="bei_bao_wei_zhi">
      <div class="bei_bao">
        <div class="item" v-for="(v,i) in user.goods"
             :style="{ backgroundImage: `url(${v.image})`, backgroundSize: `cover`  }">
          <n-badge :value="v.num" :max="99" color="#AAA">
            <n-popover trigger="hover" :raw="true" @update:show="handleUpdateShow(i)">
              <template #trigger>
                <!--              <img class="item_son" :src="v.image" :alt="v.image"/>-->
                <div class="item_son"></div>
              </template>
              <div class="equipment_detail">
                <p> {{ v.name }} </p>
                <p> {{ v.describe }} </p>
                <div class="equipment_detail_button">
                  <div class="equipment_detail_button_use" v-if="v.type === 1">
                    <n-input-number v-model:value="use_form[i]" placeholder="最小值" :min="1" :max="v.num"
                                    style="width: 109px"/>
                    <n-button type="tertiary" @click="user.use_goods(i,use_form[i])"> 使用</n-button>
                  </div>
                  <n-button type="tertiary" @click="user.wear_equipment(v,i)" v-if="v.type === 2"> 裝备</n-button>
                </div>
              </div>
            </n-popover>
          </n-badge>
        </div>
      </div>
    </div>
    <template v-if="Object.keys(user.goods).length > 21">
      <n-pagination :display-order="['quick-jumper', 'pages', ]" class="page"
                    :item-count="Object.keys(user.goods).length"
                    :page-size="21"
                    :page-slot="5"
                    :goto="()=>{ return '前往'}"
                    show-quick-jumper
                    show-size-picker
      />
    </template>
  </div>
</template>

<style scoped lang="scss">

.body {
  width: 100%;
  height: 680px;
  // 设置为相对定位
  position: relative;
}

.shu_xing {
  // 设置为据对定位
  position: absolute;
  width: 66px;
  left: 88px;
  bottom: 18px
}

.xiu_xing {
  position: absolute;
  width: 66px;
  right: 88px;
  bottom: 18px;
  text-align: right;
}

.beo_bao_main {
  /* 设置绝对定位布局 */
  position: relative;
  width: 366px;
  margin: 0 auto;
  height: 320px;

  .item {
    position: relative;
    transition: all .3s;
    cursor: pointer;

    &::before,
    &::after {
      content: "";
      position: absolute;
      top: -6px;
      left: -6px;
      right: -6px;
      bottom: -6px;
      border: 2px solid gold;
      transition: all .5s;
      animation: clippath 3s infinite linear;
      border-radius: 10px;
    }

    &::after {
      animation: clippath 3s infinite -1.5s linear;
    }

  }
}

@keyframes clippath {
  0%,
  100% {
    clip-path: inset(0 0 98% 0);
  }

  25% {
    clip-path: inset(0 98% 0 0);
  }
  50% {
    clip-path: inset(98% 0 0 0);
  }
  75% {
    clip-path: inset(0 0 0 98%);
  }
}


.header {
  /* 子元素绝对定位 */
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 106px;
  display: flex;
  justify-content: space-between;
}

.left {
  position: absolute;
  left: 18px;
  top: 26px;

  .item {
    margin-top: 12px;
  }

}

.right {
  position: absolute;
  right: 18px;
  top: 26px;

  .item {
    margin-top: 12px;
  }
}

.down {
  /* 子元素绝对定位 */
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 106px;
  display: flex;
  justify-content: space-between;
}

.bei_bao_wei_zhi{
  position: absolute;
}

.bei_bao {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 12px;
  margin-top: 18px;

  .item {
    margin-right: 18px;
    margin-top: 12px;
  }
}

.item {
  width: 46px;
  height: 46px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 1px 1px 0 #ccc;
  line-height: 46px;
  text-align: center;
}

.item_son {
  width: 46px;
  height: 46px;
  line-height: 42px;
  text-align: center;
  color: #181818;
  font-family: "楷体", serif;
  background-color: inherit !important;
  user-select: none;
  cursor: pointer;
  border-radius: 5px;
}

.equipment_detail {

  position: relative;
  user-select: none;
  width: 288px;
  height: 122px;
  background-color: rgba(255, 255, 255, 0.86);
  border-radius: 5px;
  padding: 8px;
  font-family: "楷体", serif;

}

.equipment_detail_button {

  position: absolute;
  bottom: 6px;
}

.equipment_detail_button_use {
  display: flex;
  position: absolute;
  bottom: 6px;

  &::after {
    justify-content: space-between;
  }
}

.page {
  margin-top: 18px;
  margin-left: 12px;
}

.n-list {
  background-color: inherit !important;
  user-select: none;
}
</style>
